<!--
/**
* Author: linchun
* Date: 2022-07-22 16:38
* Desc: goodsItem 商品项
*/
-->
<template>
  <view>
    <view class="goods-item flex-s-m" :class="customClass" @click="clickItem">
      <!-- 左侧商品图片 -->
      <image class="goods-img" mode="aspectFill" :src="info.imageUrl"></image>
      <view v-if="info.canReduce" class="goods-icon">立减券可用</view>
      <!-- 右侧内容 -->
      <view class="goods-content flex-col flex-b">
        <view class="goods-content_up flex-b">
          <view class="part-left mr20">
            <view class="name fb ellipsis">{{ info.name }}</view>
            <view class="desc moreShow">{{ info.description }}</view>
          </view>
          <view class="part-right fb flex-col flex-col-bottom">
            <price
              :price="info.sellPrice"
              unit-size="24"
              price-size="38"
              custom-class="fb"
              color="#FA5A0B"
            ></price>
            <!--#ifndef MP-ALIPAY-->
            <view class="tip" v-if="info.commission || info.maxCommission">{{
              showText
            }}</view>
            <!--#endif-->
          </view>
        </view>
        <footer-btn
          :info="info"
          @share="openInite"
          @pop="openShare"
        ></footer-btn>
        <share-popup v-model="showShare" v-if="showShare" @click="goFriend" />

        <invite-pop
          v-if="showInvite"
          v-model="showInvite"
          :obj="shareParams"
        ></invite-pop>
      </view>
    </view>
    <view class="pl20 pr20">
      <u-line></u-line>
    </view>
  </view>
</template>
<script>
  // import ZmImage from '@/commons/ZmImage'
  import FooterBtn from './components/FooterBtn.vue'
  import { toFixed } from '@/utils/index'
  import Price from '@/components/Price'
  import SharePopup from '@/components/SharePopup/index.vue'
  import InvitePop from '@/pages/friends/components/InvitePop.vue'
  // import { getIslogin } from '@/utils/auth'
  import { mapGetters } from 'vuex'
  export default {
    components: {
      Price,
      InvitePop,
      SharePopup,
      FooterBtn
    },
    props: {
      info: {
        type: Object,
        default() {
          return {}
        }
      },
      customClass: {
        type: String,
        default: ''
      },
      lineType: {
        type: String,
        default: ''
      }
    },
    computed: {
      hasCommision() {
        return this.info.openDistribution === '1'
      },
      ...mapGetters(['memberLevel']),
      showText() {
        const max = this.info.maxCommission
        const res = `佣金${max ? '最高' : ''}${
          max
            ? this.showCommission(this.info.maxCommission)
            : this.showCommission(this.info.commission)
        }元`
        return res
      },
      shareParams() {
        return {
          type: this.info.mallType === '1' ? 'coupon' : 'normal', //1电影券,2商品
          id: this.info.mallCommodityId,
          name: this.info.name
        }
      },
      isLineType() {
        return ['xs'].includes(this.lineType)
      }
    },
    data() {
      return {
        showShare: false,
        showInvite: false
      }
    },
    methods: {
      openInite() {
        this.showInvite = true
      },
      openShare() {
        this.showShare = true
      },
      goFriend() {
        this.$tools.navigateTo('/pages/friends/index', this.shareParams)
      },
      clickItem() {
        this.$emit('click-item')
      },
      showCommission(commission) {
        return toFixed(commission)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .goods-item {
    padding: 30rpx 20rpx 32rpx 20rpx;
    background: #fff;
    border-radius: 18rpx;
    position: relative;
    .goods-img {
      width: 200rpx;
      height: 200rpx;
      background-color: #fff;
      border-radius: 12rpx;
    }
    .goods-icon {
      position: absolute;
      top: 30rpx;
      left: 20rpx;
      padding: 5rpx 10rpx;
      opacity: 0.6 !important;
      background-color: #000;
      color: #fff;
      font-size: 18rpx;
      line-height: 1;
      border-radius: 12rpx 0 12rpx 0;
    }
    .goods-content {
      // min-width: 446rpx;
      // width: auto;
      flex: 1;
      overflow: hidden;
      height: 200rpx;
      margin-left: 23rpx;
      .goods-content_up {
        .part-left {
          // width: 287rpx;
          flex: 1;
          overflow: hidden;
          .name {
            font-size: 32rpx;
            color: #333;
          }
          .desc {
            font-size: 24rpx;
            color: #ababab;
            height: 72rpx;
            line-height: 1.5;
            margin-top: 15rpx;
          }
        }
        .part-right {
          .tip {
            height: 28rpx;
            line-height: 28rpx;
            background: #ffb415;
            border-radius: 14rpx;
            font-size: 18rpx;
            color: #fff;
            padding: 0 12rpx;
          }
        }
      }
      // .goods-content_down {
      //   .label_btn {
      //     text-align: center;
      //     height: 54rpx;
      //     line-height: 54rpx;
      //     font-size: 26rpx;
      //     border-radius: 12rpx;
      //     padding: 0 13rpx;
      //   }
      //   .label_buy {
      //     color: #fff;
      //     background: linear-gradient(-90deg, #f85d08 0%, #fd550f 99%);
      //   }
      //   .label_share {
      //     color: #fd5f45;
      //     background: #ffffff;
      //     border: 1rpx solid #fa5a0b;
      //   }
      // }
    }
  }
</style>
